<template>
	<view class="content">
		<view class='header'>
			<view class='search'>
				<u-search placeholder="搜索你想了解的问题或用户..."  v-model="keywords" @search="search" focus  :animation="true"></u-search>
			</view>
		</view>

		<scroll-view class="list" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="refresh" @scrolltolower="loadmore">
			<view class="item" v-for="item in collect" >
				<view class="business">
					<view class="avatar">
						<image mode="aspectFit" v-if="item.business.avatar_text" :src="item.business.avatar_text"></image>
						<image mode="aspectFit" v-else src="/static/avatar.png"></image>
					</view>
					<view class="author">{{ item.business.nickname }}</view>
				</view>
				
				<view class="info">
					<navigator :url="`/pages/post/info?postid=${item.id}`" class="title">{{ item.title }}</navigator>
					<view class="createtime">发布时间：{{ item.createtime_text }}</view>
					<view class="category">分类：{{ item.cate.name }}</view>
					
					<view class="join">
						<view class="status">{{ item.status_text }}</view>
						<view class="point">￥{{ item.point }}</view>
						<view class="count">{{item.comment_text}}人参与回复</view>
					</view>
				</view>
			</view>
			
		</scroll-view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 弹框组件 -->
		<u-modal :show="show" :title="'提醒'" :content="content" showCancelButton :closeOnClickOverlay="true" @cancel="show = false" @close="show = false" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		onLoad(){
			this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

			this.CollectData()
		},
		data()
		{
			return {
				triggered: false,
				finished: false,
				scrollTop: 0,
				page: 1,
				msg: '',
				business:{},
				collect: [],
				show: false,
				keywords: '',
				content: '是否确认删除',
				action: [{
                    text: '删除',
					style: {
						backgroundColor: 'rgb(245, 108, 108)',
					}
                }]
			}
		},
		methods:{
			confirm()
			{
				this.show = false
			},
			search()
			{
				this.collect = []

				this.CollectData()
			},
			//上拉加载
			onReachBottom()
			{
				if(this.finished) return;

				this.page++
				this.CollectData()
			},
			onPageScroll(e) 
			{
				this.scrollTop = e.scrollTop;
			},
			async CollectData(){
				var data = {
					busid: this.business.id,
					page: this.page,
					keywords: this.keywords
				}

				var result = await uni.$u.http.post('/business/mycollect',data)

				//改变下拉的状态
				this.triggered = false

				if(result.code == 0){
					this.finished = true
					// this.collect = []
					// return false
				}else{
					// console.log(result.data);
					
					this.collect = this.collect.concat(result.data)
					
				}
			},
			//刷新事件
			refresh() 
			{
				this.triggered = true;
				this.finished = false;

				this.collect = []
				this.CollectData()

			},
			loadmore()
			{
				// console.log('上拉加载')
			}
		}
	}
</script>


<style>
	.content{
		width:100%;
		overflow-x: hidden;
	}
	.search {
		height: 238rpx;
		background-image: url("/static/titlebg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		padding: 0 28rpx;
		display: flex;
		align-items: center;
		align-content: center;
	}

	.search-area {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		background-image: url("/static/search.png");
		background-repeat: no-repeat;
		background-size: 30rpx 30rpx;
		background-position: 35rpx 30rpx;
		border-radius: 11rpx;
		line-height: 88rpx;
		text-indent: 78rpx;
		color: #2f2e2e;
		font-size: 30rpx;
	}

	.nav {
		display: flex;
		background-color: #f1f6f9;
		position: relative;
		justify-content: space-around;
		align-items: center;
		align-content: center;
	}

	.nav .nav-item {
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		color: #666;
		font-size: 30rpx;
	}

	.nav .active {
		color: #000;
		font-weight: 600;
	}

	.nav .active-line {
		background-color: #038fff;
		width: 35rpx;
		height: 4rpx;
		position: absolute;
		top: 86rpx;
		transition: left 0.2s;
	}

	.list .item{
		display: flex;
		width:100%;
		padding:10px;
		margin:0 auto;
	}

	.business{
		width:20%;
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 10px;
		margin-right:10px;
	}

	.avatar{
		width:100%;
		height:5em;
	}

	.avatar image{
		width:100%;
		height:100%;
	}

	.author{
		text-align: center;
		font-size:.8em;
		color:#999;
		width:100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.info{
		font-size:.9em;
		color:#999;
	}

	.info .title, .info .createtime, .info .category, .info .status, .info .join{
		margin-bottom:2px;
	}

	.info .title{
		font-size:1.1em;
		width:95%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color:#000;
		text-decoration: underline;
		font-weight: bold;
	}

	.info .status{
		background:#fff8e5;
		color:#fa3534;
		padding:1px 2px;
		border:1px solid #fa3534;
		border-radius: 3px;
		margin-right:5px;
	}

	.info .join{
		display: flex;
		align-items: center;
		align-content: center;
		color:#fa3534;
	}

	.count{
		margin-right:10px;
	}

	.info .point{
		width:4em;
		text-align: center;
		background:#fff8e5;
		color:#f19049;
		padding:2px;
		margin-right:10px;
	}
</style>
